<template>
	<div>
		<el-dialog
			:title="$t('setWindow.title')"
			draggable
			width="300px"
			v-model="visible"
			@keydown.stop
		>
			<el-form :model="viewwin">
				<el-form-item :label="$t('setWindow.wndcenter')" label-width="60px">
					<el-input
						v-model.number="viewwin.wl"
						autocomplete="off"
						@keydown.stop
					></el-input>
				</el-form-item>
				<el-form-item :label="$t('setWindow.wndwidth')" label-width="60px">
					<el-input
						v-model.number="viewwin.ww"
						autocomplete="off"
						@keydown.stop
					></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="hide">{{ $t("setWindow.close") }}</el-button>
				<el-button type="primary" @click="apply">{{
					$t("setWindow.apply")
				}}</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script lang="js" setup name="SetWindow">
import { reactive, ref, watch } from "vue";
import { useI18n } from "vue-i18n";
import { storeToRefs } from "pinia";

const { locale } = storeToRefs(useI18n());
const { t } = useI18n();

const visible = ref(false);
const viewwin = reactive({ ww: 400, wl: 40 });

const emit = defineEmits(["applyWindow"]);

watch(locale, () => {
});

const show = (wwwl) => {
	viewwin.ww = wwwl.ww;
	viewwin.wl = wwwl.wl;
	visible.value = true;
};

const hide = () => {
	visible.value = false;
};

const apply = () => {
	visible.value = false;
	emit("applyWindow", viewwin);
};

defineExpose({
	show,
	apply,
});
</script>

<style lang="scss" scoped>
:deep(.el-dialog) {
	padding: 0px;
	// background-color: var(--color-theme-bg);
	border: 1px solid gray;
	border-radius: 4px;
}

:deep(.el-dialog__header) {
	background-color: var(--color-dialog-header);
	// color: var(--color-theme-text);
	height: 40px;
	padding: 8px 8px;
	border: none;
}

:deep(.el-dialog__title) {
	// background-color: var(--color-theme-bg);
	color: var(--color-theme-text);
}

:deep(.el-form-item__label) {
	background-color: var(--color-theme-bg);
	color: var(--color-theme-text);
}

// :deep(.el-dialog__headerbtn) {
// 	top: 10px;
// 	right: 10px;
// }

:deep(.el-dialog__body) {
	background-color: var(--color-theme-bg);
	color: var(--color-theme-text);
	padding: 20px 20px 5px;
}

:deep(.dialog-footer) {
	background-color: var(--color-theme-bg);
	color: var(--color-theme-text);
	padding: 0px 0px 10px;
	text-align: right;
}
</style>
